<template>
  <div class="form-config pdl-10">
    <a-form-model :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
      <a-form-model-item label="布局方式">
        <a-radio-group v-model="formConfig.layout">
          <a-radio value="horizontal">
            水平
          </a-radio>
          <a-radio value="vertical">
            垂直
          </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="对齐方式">
        <a-radio-group v-model="formConfig.labelAlign">
          <a-radio value="left">
            左
          </a-radio>
          <a-radio value="right">
            右
          </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="标题占位">
        <a-input-number v-model="formConfig.labelCol" :precision="0" :min="0" :max="24" />
      </a-form-model-item>
      <a-form-model-item label="组件占位">
        <a-input-number v-model="formConfig.wrapperCol" :min="0" :precision="0" :max="24" />
      </a-form-model-item>
      <a-form-model-item label="显示冒号" v-if="formConfig.layout === 'horizontal'">
        <a-switch v-model="formConfig.colon" />
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
export default {
  name: 'formConfig',
  props: ['formConfig'],
  watch: {
    formConfig: {
      handler(data) {
        this.$emit('update:formConfig', data)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.form-config {
}
</style>